<template>
    <div class="addgoods">
        <el-alert title="添加商品信息" center type="info" show-icon />
        <el-steps :active="active" finish-status="success" class="steps" align-center>
            <el-step title="基本信息" />
            <el-step title="商品参数" />
            <el-step title="商品属性" />
            <el-step title="商品图片" />
            <el-step title="商品内容" />
            <el-step title="完成" />
        </el-steps>
        <el-tabs :tab-position="tabPosition" @tab-change="change" class="demo-tabs">
            <el-tab-pane label="基本信息">
                <el-form ref="ruleFormRef" status-icon :rules="rules" :model="formLabelAlign" style="max-width: 460px">
                    <el-form-item label="商品名称" prop="goods_name">
                        <el-input v-model="formLabelAlign.goods_name" />
                    </el-form-item>
                    <el-form-item label="商品价格(元)" prop="goods_price">
                        <el-input v-model="formLabelAlign.goods_price" type="Number" />
                    </el-form-item>
                    <el-form-item label="商品重量" prop="goods_weight">
                        <el-input v-model="formLabelAlign.goods_weight" type="Number" />
                    </el-form-item>
                    <el-form-item label="商品数量" prop="goods_number">
                        <el-input v-model="formLabelAlign.goods_number" type="Number" />
                    </el-form-item>
                    <el-form-item label="商品分类" prop="goods_cat">
                        <el-cascader v-model="formLabelAlign.goods_cat" :options="list"
                            :props="{ value: 'cat_id', label: 'cat_name', children: 'children' }"
                            @change="handleChange" />
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="商品参数" v-model="activeName">
                <div v-for="(item, index) in manylist" :key="index">
                    <p>{{ item.attr_name }}</p>
                    <el-button>
                        <el-radio :label="3">{{ item.attr_vals }}</el-radio>
                    </el-button>
                </div>
            </el-tab-pane>
            <el-tab-pane label="商品属性" v-model="activeName1">
                <div v-for="(item, index) in onlylist" :key="index">
                    <p>{{ item.attr_name }}</p>
                    <el-button>
                        <el-radio :label="3">{{ item.attr_vals }}</el-radio>
                    </el-button>
                </div>
            </el-tab-pane>
            <el-tab-pane label="商品图片">
                <el-upload v-model="fileList" class="upload-demo" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
                    <el-button type="primary" @click="aa">上传</el-button>
                    <template #tip>
                        <div class="el-upload__tip">
                            jpg/png files with a size less than 500KB.
                        </div>
                    </template>
                </el-upload>
            </el-tab-pane>
            <el-tab-pane label="商品内容">
                <div class="editor">
                    <quill-editor :content="content" :options="editorOption" @change="onEditorChange($event)" />
                </div>
            </el-tab-pane>

        </el-tabs>
        <el-button type="primary" @click="addgoods" v-if="value == 4">添加</el-button>
    </div>
</template>
<script>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { getcascader, getparams, addgoodslist } from '../../api/goods'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { QuillEditor } from '@vueup/vue-quill'
export default {
    setup(props) {
        const tabPosition = ref('left')
        const data = reactive({
            fileList: [],
            active: 0,
            formLabelAlign: {},
            list: [],
            rules: {
                goods_name: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                ],
                goods_price: [
                    { required: true, message: '请输入商品价格', trigger: 'blur' },
                ],
                goods_weight: [
                    { required: true, message: '请输入商品数量', trigger: 'blur' },
                ],
                goods_number: [
                    { required: true, message: '请输入商品分类', trigger: 'blur' },
                ],
            },
            catId: [],
            paramsId: [],
            activeName: 'many',
            activeName1: 'only',
            manylist: [],
            onlylist: [],
            content: '<h2>I am Example</h2>',
            editorOption: {
                // Some Quill options...
            },
            value: 0

        })
        const change = (value) => {
            data.value = value
            data.active = value++
            data.paramsId = data.catId.length < 3 ? [] : data.catId
            let id = data.paramsId.length < 3 ? undefined : data.paramsId.slice(-1)[0]
            if (value == 2) {
                console.log(data.activeName);
                getparams(id, data.activeName).then(res => {
                    data.manylist = res.data
                    // data.manylist.attr_vals.join(',')
                    console.log(data.manylist.attr_vals.split(','));
                })
            } else if (value == 3) {
                console.log(data.activeName1);
                getparams(id, data.activeName1).then(res => {
                    data.onlylist = res.data
                    console.log(res);
                })
            }
            console.log(value);
        }
        onMounted(() => {
            getlist()
        })
        const getlist = () => {
            getcascader().then(res => {
                data.list = res.data
            })
        }
        const handleChange = (e) => {
            data.catId = e
        }
        const onEditorChange = ({ quill, html, text }) => {
            console.log('editor change!', quill, html, text)
            this.content = html
        }
        const addgoods = () => {
            var obj={
                ...data.formLabelAlign,
                goods_cat:data.formLabelAlign.goods_cat.join(','),
                pics:[]
            }
            addgoodslist(obj).then(res => {
                console.log(res);
            })
            console.log(obj);
        }
        return {
            ...toRefs(data),
            tabPosition,
            change,
            getlist,
            handleChange,
            onEditorChange,
            addgoods
        }
    },
    components: {
        QuillEditor
    }
}
</script>
<style lang="scss" scoped>
.addgoods {
    padding: 30px 20px;
    background: #fff;

    .editor {
        height: 400px;
    }

    .steps {
        width: 800px;
        margin: 30px 0;
    }

}
</style>